<template>
    <div class="menu-button">
        <div class="bgp"></div>
        <!-- <div class="bg-satellite"></div> -->
        <div class="label">
            <slot></slot>
        </div>
    </div>
</template>

<script setup lang="ts"></script>
<script lang="ts"></script>

<style lang="scss" scoped>
@use 'src/assets/scss/main.scss' as *;

@keyframes fly {
    0% {
        background-size: 140%;
        background-position: center top;
    }

    70% {
        background-size: 140%;
        background-position: center center;
    }

    100% {
        background-size: 100%;
        // background-position: center center;
    }
}

.menu-button {
    height: 250px;
    // background-color: rgba(0, 128, 0, 1);
    border-radius: 6px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;

    @include animate_trans();
    .bgp {
        width: 100%;
        height: 100%;
        // background-image: url('/img/main/aerial-view-sea.jpg');
        background-image: url('/img/main/btn-statellite-max.jpg');
        background-size: 200%;
        background-position: center center;
        transition: all 0.3s ease-in-out;

        &:hover {
            // background-size: 140%;
            // background-position: center;
            animation: fly 1s ease-in-out forwards;
        }
    }
    &:hover {
        @include base-box-shadow-10;
    }

    &:active {
        //transform: translate(2px,2px);
        @include hover-move(2px);
    }

    .label {
        display: block;
        position: absolute;
        left: 30px;
        bottom: 16px;
        font-size: 22px;

        // color: #000000;

        // align-items: center;
    }
    .bg-satellite{
        position:absolute;
        top: 60px;
        height: 200px;
        width: 200px;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(/img/main/satellite.png);
    }
}
</style>
